package app.agent.systems

import app.comet.{AddSystem, Subscriber}
import im.mange.jetboot.Css._
import im.mange.jetboot.Html._
import im.mange.jetboot._
import im.mange.jetboot.bootstrap3.Bootstrap._
import im.mange.jetboot.js.JsCmdFactory._
import im.mange.jetboot.widget.{ButtonPresentation, ServerSideButton}
import im.mange.shoreditch.engine.systems.System

//TODO: this needs a good old tidy up
//TODO: ultimately I probably need to be a table, so layout is nice
//TODO: only show add when asked and click on a row to show/edit the details
//TODO: in the real world, with be x systems (one alias) ... and under each n environments/versions
//TODO: group by alias (sorted)
//TODO: this starts to look like we now need the Services passed through too/instead - definitely for validation
//TODO: add a broken service Beards Bank to show an unvalidated one
//TODO: hover over 2nd line to get the system url
//TODO: ultimately show a bad against this as systems break
//TODO: the subscriber should not be in here .. that's definitely an agent concern not presentation
case class SystemsContentPresentation(systems: List[System], subscriber: Subscriber) extends Renderable {
  def render = {
    //TODO: add internal ones ...
    div(
      span(addButton, span("New ...")),
      renderSystems//,
    ).styles(fontSize(smaller), clear(both)).render
  }

  private def renderSystems =
    Composite(systems.map(s => renderSystem(s/*, true*/)): _*)

  //TODO: these should be buttons
  //TODO: support edit
  //TODO: support delete
  //TODO: there is a status renderer in here somewhere, with all the tick business
  private def renderSystem(s: System/*, validated: Boolean*/) = {
    Composite(
      div(
//        span().classes(glyphicon("minus")),
//        Spacer(),
//        span().classes(glyphicon(if (validated) "ok" else "remove"), if (validated) "green" else "red").styles(marginRight("5px")),
//        span(" - " + s.name + " (" + s.alias + ") - " + s.env)
//        R(<h5>{s.alias} <small>{s.name}{s.env}</small></h5>)
        R(<h5>{"-"} <small>{s.name + " (" + s.alias + ") - " + s.env}</small></h5>)
      )//,
//      div(
//
//        span()
//      ).styles(marginBottom("5px"), fontSize(smaller))
    )
  }

  private def addButton = new ServerSideButton() {
    val id = "addSystem"
    //TODO: this blows somewhat
    //TODO: theres a widget in here somewhere ... jetpac
    //TODO: could lose spacer and use marginLeft here
    //TODO: consider making the selected on go bold or something
    def presentation = ButtonPresentation(
      span(
        span().classes(glyphicon("plus")).styles(marginRight("5px"))
      )
      .render
    )

    def onClick = addSystem
  }

  private[agent] def addSystem = {
    subscriber ! AddSystem()
    //this is a bit .. because I seems to get thrown away ...
    nothing
    //    Element(id = "label" + id).addClass("selected")
    //    button.element.disable
    //TODO: this should proable disable and then do an ajaxInvoke to RunTest(x) ...
    //TODO: should also clear the activityAgent - which is why this will all be easier in an agent ...
  }
}